<template>
	<view class="container">
		<!-- yuyueshijian预约列表 -->
		<view class="seat-list">
			<view class="seat-item" v-for="seat in seatList" :key="seat.id">
				<view class="seat-header">
					<text class="seat-no">名称：{{seat.sheyingshixingming}}</text>
					<text class="seat-status">{{seat.zuoweizhuangtai}}</text>
				</view>

				<view class="seat-info">
					<text class="info-item">费用：{{seat.jiage}}</text>
					<text class="info-item">预约时间：{{seat.sheyingshijian}}</text>
				</view>

				<view class="seat-footer">
					<view class="actions">
						<button class="action-btn primary" v-if="seat.iszf === '否'"
							@click="handlePay(seat.id)">立即支付</button>
					<!-- 	<button class="action-btn primary" v-if="seat.iszf === '是'"
							@click="pinglun(seat.id)">去评论</button> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSeatList,
		updateSeatStatus
	} from "@/request/API/xinwentongzhi/index";

	export default {
		data() {
			return {
				seatList: [], // yuyueshijian列表
				pagination: {
					page: 1,
					limit: 10,
					total: 0
				}
			};
		},
		onShow() {
			this.loadSeatList();
		},
		methods: {
			// 加载yuyueshijian列表
			async loadSeatList() {
				const user = uni.getStorageSync('user');
				const params = {
					page: this.pagination.page,
					limit: this.pagination.limit,
					yonghuming: user.yonghuming
				};

				const res = await getSeatList(params);
				if (res.code === '0') {
					this.seatList = res.data.list;
					this.pagination.total = res.data.total;
				}
			},
			pinglun(id) {
				uni.navigateTo({
					url: `/pages/diandongche/list?id=${id}`
				});
			},
			handlePay1() {
				// uni.showLoading({
				// 	title: '开锁中...'
				// });
				uni.showModal({
					title: '开锁成功',
					content: '您已成功开锁，放好物品后请关好仓门',
					showCancel: false,
					confirmText: '确定',
					confirmColor: '#07c160',
					success: () => {
						this.loadSeatList();
					}
				});
			},
			// 处理支付
			async handlePay(id) {
				uni.showLoading({
					title: '支付中...'
				});
				try {
					// 调用支付接口
					const res = await updateSeatStatus({
						id,
						iszf: '是',
						zuoweizhuangtai: '占用',
					});

					if (res.code === '0') {
						// 模拟微信支付成功
						this.showWechatPaySuccess();
						// 重新加载数据
						this.loadSeatList();
					} else {
						uni.showToast({
							title: res.msg || '支付失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '支付失败，请重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},

			// 显示微信支付成功弹窗
			showWechatPaySuccess() {
				uni.showModal({
					title: '支付成功',
					content: '您已成功支付预约费用',
					showCancel: false,
					confirmText: '确定',
					confirmColor: '#07c160',
					success: () => {
						this.loadSeatList();
					}
				});
			},
			// 获取状态文本
			getStatusText(status) {
				return status;
			}
		}
	};
</script>
<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #f8fafc;
		/* 更柔和的背景色 */
		min-height: 100vh;
	}

	.seat-list {
		.seat-item {
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 30rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
			border: 1rpx solid #e2e8f0;
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
			}

			.seat-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #e2e8f0;

				.seat-no {
					font-size: 30rpx;
					color: #2d3748;
					font-weight: 500;
				}

				.seat-status {
					font-size: 28rpx;
					padding: 6rpx 16rpx;
					border-radius: 20rpx;
					background: #f0fff4;
					color: #38a169;
				}
			}

			.seat-info {
				padding: 20rpx 0;
				display: flex;
				flex-direction: column;
				gap: 12rpx;

				.info-item {
					font-size: 28rpx;
					color: #4a5568;
					line-height: 1.6;
					display: flex;
					align-items: center;

					&::before {
						content: "•";
						color: #63b3ed;
						margin-right: 12rpx;
						font-size: 36rpx;
						line-height: 1;
					}
				}
			}

			.seat-footer {
				padding-top: 20rpx;
				border-top: 1rpx solid #e2e8f0;
				display: flex;
				justify-content: flex-end;
				position: relative;

				.actions {
					.action-btn {
						padding: 0 40rpx;
						height: 64rpx;
						line-height: 64rpx;
						border-radius: 32rpx;
						font-size: 28rpx;
						color: #fff;
						background: #4299e1;
						border: none;
						box-shadow: 0 4rpx 12rpx rgba(66, 153, 225, 0.3);
						transition: all 0.2s ease;

						&.primary {
							background: #48bb78;
							box-shadow: 0 4rpx 12rpx rgba(72, 187, 120, 0.3);
						}

						&:active {
							transform: scale(0.98);
							box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
						}
					}
				}
			}
		}
	}
</style>